<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

  </style>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <style>

  </style>
</head>

<body>
  <div id="app">
    <template>

      <div>



        <div>
          <span class="demonstration">日期选择器</span>
          <el-date-picker v-model="checkTime" type="daterange" :default-value="defaultTime" @change='changeTime'
            unlink-panels range-separator="至" start-placeholder="开始日期" endTime-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>

        </div>
        <div>
          <span class="tag is-primary is-normal">交易对</span>
          <select class="singleSelect" style="width:400px">
            <option value="">---请选择---</option>
            <%pair.forEach(item=>{%>
              <option value="">
                <%=item%>
              </option>
              <% })%>
          </select>
        </div>
      </div>
    </template>

  </div>


  <br>
  <br>
  <br>
  <div id="container" class="ml-4" style="width:90%;height:700px">请选择交易对...</div>


  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>

  <script src="https://cdn.highcharts.com.cn/highstock/highstock.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
  <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/modules/drag-panes.js"></script>
  <script>
    var interval = '1d'
    var endTimeTime = dayjs().valueOf()
    var startTime = dayjs(endTimeTime).subtract(1000, 'day').valueOf()
    var ohlcMap = new Map()
    var volumeMap = new Map()
    var selectData = ''


    var app = new Vue({
      el: '#app',
      data() {
        return {
          intervalDate:'d',
          interval: '1d',
          intervalNum: '1',
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const start = dayjs().subtract(7, 'day').valueOf()
                picker.$emit('pick', [start, endTime]);
                // startTime = 
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const start = dayjs().subtract(30, 'day').valueOf()
                picker.$emit('pick', [start, endTime]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const start = dayjs().subtract(90, 'day').valueOf()
                picker.$emit('pick', [start, endTime]);
              }
            }, {
              text: '最近半年',
              onClick(picker) {
                const start = dayjs().subtract(6, 'month').valueOf()
                picker.$emit('pick', [start, endTime]);
              }
            }, {
              text: '最近一年',
              onClick(picker) {
                const start = dayjs().subtract(1, 'year').valueOf()
                picker.$emit('pick', [start, endTime]);
              }
            }, {
              text: '最近三年',
              onClick(picker) {
                const start = dayjs().subtract(3, 'year').valueOf()
                picker.$emit('pick', [start, endTime]);
              }
            }]
          },
          checkTime: '',
          defaultTime: [dayjs().subtract(6, 'month').format('YYYY-MM-DD'), dayjs().format("YYYY-MM-DD")]
        };
      },
      methods: {
        changeTime() {
          startTime = dayjs(this.checkTime[0]).valueOf()
          endTimeTime = dayjs(start).subtract(1000, 'day').valueOf()
          if (selectData) {
            axios.get('/klines', { params: { 'symbol': selectData, 'interval': interval, startTime: start, endTimeTime: endTime, limit: 1000 } }).then(data => {
              chart(data, selectData)
            })
          }
        }
      }
    })


  </script>
</body>

</html>